<template>
	<view class="layout">
		<view class="navbar">
			<view class="statusBar" :style="{height:getStatusBarHeight()+'px'}"></view>
			<view class="titleBar" 
			:style="{height:getTitleBarHeight()+'px', marginLeft:getLeftIconLeft()+'px'}">
				<view class="LRbox">
					<uni-badge class="uni-badge-left-margin" 
						v-if="title=='我的'" size="small"
						:text="notifCount" :max-num="99" absolute="rightTop"
						:offset="[3,3]"
						>
						<uni-icons  
							@click="goToNotification()"
							class="notification" 
							color="#fff" 
							type="notification" 
							size="58rpx">
						</uni-icons>
					</uni-badge>

				</view>
				<view class="title">{{title}}</view>
				<view class="LRbox"></view>
			</view>
		</view>
		<view class="fill" :style="{height:getNavBarHeight()+'px'}">
			
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {getStatusBarHeight,getTitleBarHeight,getNavBarHeight,getLeftIconLeft} from "@/utils/system.js"
import { useNotificationStore } from '@/stores/index.js'
import { storeToRefs } from 'pinia'
const notificationStore = useNotificationStore()
const { notifCount } = storeToRefs(notificationStore)
defineProps({
	title:{
		type:String,
		default:"壁纸"
	}
})
const goToNotification = () => {
	uni.navigateTo({
		url: '/pages/notification/notification'
	})
}
</script>

<style lang="scss" scoped>
.layout{
	.navbar{
		position: fixed;
		top:0;
		left:0;
		width: 100%;
		z-index: 10;
		background:
		linear-gradient(to bottom,transparent,#fff 700rpx),
		linear-gradient(to right,#32DBBA 15%, #13C4A3 85%,#32DBBA);
		.statusBar{}
		.titleBar{
			display: flex;	
			align-items: center;
			// justify-content: center;
			justify-content: space-between;
			padding:0 30rpx;
			.LRbox{
				.notification{
					margin-left: 10rpx;
					// font-weight: 600;
					border-radius: 50%;
					// background-color: #fff;
					padding: 6rpx;
				}
				width: 80rpx;
				height: 100%;
				display: flex;
				align-items: center;
			}
			.title{
				font-weight: 600;
				color: #fff;
			}
		}
	}
	.fill{
		
	}
}
</style>